<template>
	<view class='old-diy-magic-box home-nomoral component-diy' :style="marginStyle">
		<view class="box" v-if="reset" :style="boxStyle">
			<image v-show="componentData.bigImage.hide != 1" class='home-magic-box-img' :style="bigImgStyle" mode="widthFix"
				:src="componentData.bigImage.imageUrl || 'https://www.xzthealth.com/Public/MallSmallApp/home-magic.jpg'" @click="toImgUrl(componentData.bigImage.page.url)"></image>
			<view class='home-magic-list'>
				<view class='small-img-box' v-for="(item, index) in componentData.smallImages">
					<image v-show="item.hide != 1" :src='item.imageUrl || exampleImageTwo' :key="index" :style="smallImgStyle" mode='widthFix'
						@click="toImgUrl(item.page.url)"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['componentData'],
		data() {
			return {
				reset: true,
				exampleImageTwo: '../../static/images/example-image.jpg',
			};
		},
		computed: {
			marginStyle() {
				let css = {
					'margin': '5px 15px',
					'padding': 0,
					'margin-top': this.componentData.marginTop + 'px',
					'margin-bottom': this.componentData.marginBottom + 'px',
					'margin-left': this.componentData.marginLR + 'px',
					'margin-right': this.componentData.marginLR + 'px',
				}
				return this.$joinStyle(css);
			},
			boxStyle() {
				let css = {
					'padding': '10px',
					'padding-top': this.componentData.paddingTRBL + 'px',
					'padding-bottom': this.componentData.paddingTRBL + 'px',
					'padding-left': this.componentData.paddingTRBL + 'px',
					'padding-right': this.componentData.paddingTRBL + 'px',
					'border-radius': this.componentData.borderRadius + 'px',
					'background-color': this.componentData.backgroundColor,
				}
				return this.$joinStyle(css);
			},
			bigImgStyle() {
				let css = {
					'margin': '5px',
					'width': '100%',
					'margin-top': this.componentData.bMarginTop + 'px',
					'margin-bottom': this.componentData.bMarginBottom + 'px',
					'margin-left': this.componentData.bMarginLR + 'px',
					'margin-right': this.componentData.bMarginLR + 'px',
					'border-radius': this.componentData.bBorderRadius + 'px',
				}
				if (this.componentData.bMarginLR > 0) {
					css['width'] = `calc(100% - ${this.componentData.bMarginLR*2}px)`;
				}
				return this.$joinStyle(css);
			},
			smallImgStyle() {
				let css = {
					'margin': '0 5px 0',
					'width': 'calc(100% - 10px)',
					'margin-top': this.componentData.sMarginTop + 'px',
					'margin-bottom': this.componentData.sMarginBottom + 'px',
					'margin-left': this.componentData.sMarginLR + 'px',
					'margin-right': this.componentData.sMarginLR + 'px',
					'border-radius': this.componentData.sBorderRadius + 'px',
				}
				if (this.componentData.sMarginLR > 0) {
					css['width'] = `calc(100% - ${this.componentData.sMarginLR*2}px)`;
				}
				return this.$joinStyle(css);
			},
		},
		methods: {
			toImgUrl: function(url) {
				if (url) {
					uni.navigateTo({
						url: url
					})
				}
			}
		},
		mounted() {

		},
		watch: {
			componentData: {
				deep: true,
				immediate: true,
				handler() {
					this.reset = false;
					this.$nextTick(() => {
						this.reset = true;
					})
					//临时处理旧客户的DIY默认变量 过几个版本后记得删除
					let options = {
						marginTop: 5,
						marginBottom: 5,
						marginLR: 15,
						paddingTRBL: 10,
						borderRadius: 6,
						backgroundColor: 'rgba(255,255,255,1)',
						bMarginTop: 5,
						bMarginBottom: 8,
						bMarginLR: 5,
						bBorderRadius: 5,
						sMarginTop: 0,
						sMarginBottom: 5,
						sMarginLR: 5,
						sBorderRadius: 5,
					}
					for (let key in options) {
						if (!(key in this.componentData)) {
							this.componentData[key] = options[key];
						}
					}
				}
			}
		}
	}
</script>

<style lang="less">
	.old-diy-magic-box.home-nomoral {
		box-sizing: border-box;
		background: transparent;

		.box {
			width: 100%;
			background-color: #fff;
			box-sizing: border-box;
			font-size: 0;
		}

		.home-magic-box-img {
			width: 100%;
		}

		.home-magic-list {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 0;
			padding: 0;
		}

		.small-img-box {
			// width: 33.333333%;
			box-sizing: border-box;
			flex: 1;
		}

		.small-img-box>image {
			width: 100%;
		}
	}
</style>
